<template>
  <div class="container">
    <div class="left">
      <p>让我们更懂校园 让校园更加智慧</p>
      <img
        src="../assets/images/Snipaste.png"
        alt="校园图"
        title="校园规划图"
      />
    </div>
    <div class="right">
      <p>实习就业管理平台</p>
      <div class="login-form">
        <el-input
          v-model="username"
          class="w-50 m-2 form-item"
          placeholder="请输入用户名、手机号或者邮箱"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><User /></el-icon>
          </template>
        </el-input>
        <el-input
          v-model="password"
          type="password"
          class="w-50 m-2 form-item"
          placeholder="请输入密码"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><Lock /></el-icon>
          </template>
        </el-input>
        <el-button class="form-item" type="primary" @click="handleLogin"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { login } from "../api/userApi";
import Cookies from "js-cookie";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    ...mapMutations([
      // 'increment' // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      "setUser",
    ]),
    async handleLogin() {
      //   login({
      //     username: this.username,
      //     password: this.password,
      //   })
      //     .then((res) => {
      //       if (res.user.is_school_admin || res.user.is_superuser) {
      //         Cookies.set("token", res.token);
      //         ElMessage({
      //           message: "登录成功，即将跳转...",
      //           type: "success",
      //         });
      //         setTimeout(() => {
      //           this.$router.push({ name: "home" });
      //         }, 500);
      //       } else {
      //         ElMessage({
      //           message: "您不是管理员用户",
      //           type: "warning",
      //         });
      //       }
      //     })
      //     .catch((error) => {
      //       ElMessage({
      //         message: error,
      //         type: "warning",
      //       });
      //     });

      try {
        const res = await login({
          username: this.username,
          password: this.password,
        });
        if (res.user.is_school_admin || res.user.is_superuser) {
          Cookies.set("token", res.token);
          //   this.$store.commit("setUser", res.user);
          this.setUser(res.user);
          ElMessage({
            message: "登录成功，即将跳转...",
            type: "success",
          });
          setTimeout(() => {
            this.$router.push({ name: "home" });
          }, 500);
        } else {
          ElMessage({
            message: "您不是管理员用户",
            type: "warning",
          });
        }
      } catch (error) {
        // if (error) {
        //   ElMessage({
        //     message: error,
        //     type: "warning",
        //   });
        // }
      }
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
  box-sizing: border-box;

  display: flex;
  flex-flow: row nowrap;
}

.left {
  width: 70%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 10px;

  p {
    font-size: 53px;
    color: #347caf;
    font-weight: 800;
    margin-bottom: 20px;
  }

  img {
    width: 90%;
    height: 75%;
  }

  //   border: 1px solid blue;
}

.right {
  width: 30%;
  min-width: 600px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  //   border: 1px solid green;

  p {
    font-size: 28px;
    color: #101010;
    font-weight: 700;
    margin-bottom: 10px;
  }
}

.login-form {
  width: 400px;
  height: 400px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border: 1px solid var(--el-border-color);

  .form-item {
    margin: 30px 10px 0 10px;
    width: 80%;
    height: 40px;
  }
}
</style>
